import React,{FC} from "react"
import {ContextD, TodoTabProp} from '../Impl/TodoImp'
import {MoneyContext} from '../context/MoneyContext'
let TodoTab:FC<TodoTabProp> = function(props:TodoTabProp){
    return <>
        <div>
            <span onClick={()=>props.setStatus(1)}
            style={{backgroundColor:props.status==1?'gray':''}}
            >全部({props.todoarray.length})</span>
            <span onClick={()=>props.setStatus(2)}
             style={{backgroundColor:props.status==2?'gray':''}}
             >已完成({props.todoarray.filter(t=>t.done).length})</span>
            <span onClick={()=>props.setStatus(3)}
             style={{backgroundColor:props.status==3?'gray':''}}
             >未完成({props.todoarray.filter(t=>!t.done).length})</span>
        </div>
        <h1>父组件 context传值</h1>
        <div>
            <MoneyContext.Consumer>
                {
                    (o:ContextD)=>{
                       return <p>{o.money} <button onClick={()=>o.addMoney("111")}>addMoney</button></p>
                    }
                }
            </MoneyContext.Consumer>
        </div>
    </>
}
export default TodoTab